<template>
	<view>
		<tt-bar title="考勤签到" leftIcon="icon-back">
			<template v-slot:rightCnt>
				<text class="rightText"  @tap="toPage" data-url="checkWorkHistory" :data-cid="cid" :data-cname="cname">考勤规则</text>

			</template>
		</tt-bar>
		<view class="latelyBox">
			<text class="lateleTitle">班级：{{cname}}</text>
			<text class="lateleTitle">课程：{{gname}}</text>
			<text class="lateleTitle">老师：{{tname}}</text>
			<text class="lateleTitle">教室：{{sroom}}</text>
			
		</view>
		<view class="ckRow" @tap="selectDate">
			<text class="iconfont icon-liebiao"></text>
			<text class="label">上课日期</text>
			<text class="value">{{csDate}}</text>
			<text class="iconfont icon-right"></text>
		</view>
		<view class="ckRow" >
			<text class="iconfont icon-shijian1"></text>
			<text class="label">上课时间</text>
			<text class="value" @tap="selectTime">{{csTime}}</text>
			<text style="margin: 0 10upx;">——</text>
			<text class="value" @tap="selectEtime">{{edTime}}</text>
			<text class="iconfont icon-right"></text>
		</view>
		<scroll-view class="studentList"  scroll-y="true"  :style="{'height':scHeight+'px'}">
			<view class="scList">
				<view class="studentRow" v-for="(item,index) in studentList" :key="index">
					<view class="stuInfo">
						<text class="studentName">{{item.name}}</text>
						<view class="count">
							<text>剩余</text>
							<text class="leftCount">{{item.leftCount}}</text>
							<text>课次</text>
						</view>
					</view>
					<text class="btn" :class="[item.status==2?'active':'']" data-type="2" :data-id="index" :data-key="item.id" @tap="setWork">请假</text>
					<!-- <text class="btn" :class="[item.status==3?'active':'']" data-type="3" :data-id="index" :data-key="item.id" @tap="setWork">缺勤</text> -->
					<text class="btn " :class="[item.status==1?'active':'']" data-type="1"  :data-id="index" :data-key="item.id" @tap="setWork">签到</text>
				</view>

			</view>
			<emptyBox v-if="studentList.length<1" type="student"></emptyBox>
		</scroll-view>


		<view class="btmFiexBtn" v-if="!isEdit && studentList.length>0">
			<button @tap="tijiao" v-if="studentList.length>0">提交</button>
		</view>
		<hkModal ref="hkModal"></hkModal>
		<w-picker ref="startDate" mode="date" :current="true" :disabled-after="true" statrYear="2020" @confirm="choseDate"></w-picker>
		<nPicker ref="startTime" mode="time" :second="false" :visible.sync="timeShow"  @confirm="choseTime"></nPicker>
		<nPicker ref="endTime" mode="time" :second="false" :visible.sync="etimeShow"  @confirm="choseETime"></nPicker>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "../../components/emptyBox/emptyBox.vue";
	import API from "@/common/api.js";
	import hkModal from "@/components/hk-modal/hk-modal.vue";
	import {mapState} from "vuex";
	import wPicker from "../../components/w-picker/w-picker.vue";
	import nPicker from "../../components/n-picker/w-picker.vue";
	export default {
		components: {
			ttBar,
			emptyBox,
			hkModal,
			wPicker,
			nPicker
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		data() {
			return {
			
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(620),
				cid: '',
				cname: '',
				gname:'',
				sroom:'',
				tname:'',
				latelyData: {
					data: '',
					time: '',
					qiandao: 0,
					qingjia: 0,
					queqin: 0
				},
				studentList: [],
				postStudent: [],
				bukeStudent: [],
				oldData: [],
				isEdit: false,
				btid: '',
				csDate:'必填',
				csTime:'开始时间',
				edTime:'结束时间',
				timeShow:false,
				etimeShow:false,
			};
		},
		methods: {
			setWork(e) {
				let _index = parseInt(e.currentTarget.dataset.id);
				let _status = parseInt(e.currentTarget.dataset.type)
				let _key=e.currentTarget.dataset.key
				if(this.isEdit){
					this.$refs.hkModal.init({
						title:'确认修改',
						cntText:'是否为该学员修改签到信息？',
						cancle:'取消',
						confirm:'确认',
						maskClose:true,
						confirmFcn:()=>{
							// 单个修改
							API.editCheckWork({
								id:_key,
								status:_status
							}).then(res=>{
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								});
								this.studentList[_index].status = _status
								uni.$emit("upList")
							})
						},
					})
					this.$refs.hkModal.show()
				}else{
					
					this.studentList[_index].status = _status
					this.postStudent[_index].status = _status
				}
				

			},
			tijiao() {
				if(this.csDate=='必填'){
					uni.showToast({
						title: '请选选择上课日期',
						icon: 'none'
					});
				}else{
					let _data={
						class_id: this.cid,
						teacherId: this.userInfo.userId,
						items: this.postStudent,
						date:this.csDate,
						begin:this.csTime=='开始时间'?'':this.csTime,
						end:this.edTime=='结束时间'?'':this.edTime
					}
					
					API.createCheckWork(_data).then(res => {
						uni.showToast({
							title: '提交考勤成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.$emit('upList');
							uni.$emit('rollRefresh');
							uni.redirectTo({
								url:'../editWork/editWork?btid='+res.data.batchId+'&cname='+this.cname+'&gname='+this.gname+'&sroom='+this.sroom+'&tname='+this.tname
							})
						}, 1500)
					})
					
				}
				

			},
			getData() {
				let _this = this;
				if (_this.isEdit) {
					API.getCheckWorkDetail(this.btid).then(res => {
						this.studentList = res.data.data;
						_this.postStudent=[];
						res.data.data.forEach(function(v, i) {
							_this.postStudent.push({
								id: v.id,
								status: v.status
							})
						})
					})
				} else {
					API.getClassStudent(this.cid).then(res => {
						this.studentList = res.data.data;
						_this.postStudent=[];
						res.data.data.forEach(function(v, i) {
							_this.postStudent.push({
								id: v.id,
								status: v.status == 0 ? 1 : v.status
							})
						})
					})
				}
				API.getClassCheckListById(this.cid).then(res => {
					if (res.data.data.length > 0) {
						this.latelyData = this.dataChange(res.data.data)[0].data[0]
					} else { //如果没有学员

					}
				})

			},
			dataChange(data) {

				data = data.groupArr("batch_id");

				data.forEach(function(item, val) {
					item.date = item.group.substr(2, 4) + '-' + item.group.substr(6, 2) + '-' + item.group.substr(8, 2);
					item.time = item.group.substr(10, 2) + ':' + item.group.substr(12, 2) + ':' + item.group.substr(14, 2);
				})

				return data.groupArr("date");

			},
			selectDate(){
				this.$refs.startDate.show();
			},
			selectTime(){
				this.timeShow=true;
			},
			selectEtime(){
				this.etimeShow=true;
			},
			choseDate(e){
				this.csDate=e.result;
			},
			choseTime(e){
				if(this.edTime!='结束时间'){
					let _start=parseInt(e.result.replace(':',''));
					let _end=parseInt(this.edTime.replace(':',''))
					if(_start>_end){
						uni.showToast({
							title: '开始时间不能晚于结束时间',
							icon: 'none'
						});
					}else{
						this.csTime=e.result;
					}
				}else{
					this.csTime=e.result;
				}
			},
			choseETime(e){
				if(this.csTime!='开始时间'){
					let _start=parseInt(this.csTime.replace(':',''));
					let _end=parseInt(e.result.replace(':',''))
					if(_start>_end){
						uni.showToast({
							title: '结束时间不能早于开始时间',
							icon: 'none'
						});
					}else{
						this.edTime=e.result;
					}
				}else{
					this.edTime=e.result;
				}
			}
			
		},
		onLoad(cfm) {

			if (cfm.btid) {
				this.isEdit = true;
				this.btid = cfm.btid
			}
			this.cid = cfm.cid;
			this.cname=cfm.cname;
			this.gname=cfm.gname;
			this.sroom=cfm.sroom;
			this.tname=cfm.tname;
			this.csTime=cfm.stime?cfm.stime:'开始时间';
			this.edTime=cfm.etime?cfm.etime:'结束时间';
			let _tm=new Date();
			this.csDate=_tm.pattern('yyyy-MM-dd');
			this.getData();
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}
	.ckRow{
		background-color: #FFFFFF;
		height: 90upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f6f6f6;
		padding: 0 38upx;
		.iconfont:first-child{
			font-size: 44upx;
			color: #8c8bad;
			margin-right: 10upx;
		}
		.label{
			font-size: 32upx;
			color: #5b5b5b;
			flex-grow: 1;
		}
		.value{
			font-size: 32upx;
			color: #909090;
		}
		.iconfont:last-child{
			color: #909090;
			font-size: 32upx;
			margin-left: 20upx;
		}
		
	}
	.rightBox {
		display: flex;
		align-items: center;
		height: 90upx;
		text{
			flex-shrink: 0;
		}
	}

	.rightIcon {
		width: 35upx;
		height: 35upx;
		margin-right: 10upx;
	}

	.rightText {
		color: #8483a4;
		font-size: 28upx;
	}

	.latelyBox {
		display: flex;
		flex-direction: column;
		padding: 0upx 38upx;
		justify-content: center;
		background-color: #8c8bad;
		color: #FFFFFF;
		height: 230upx;
		overflow: hidden;
		transition: all 0.2s;

		text {
			font-size: 28upx;
		}

		
	}

	.tabBar {
		height: 96upx;
		display: flex;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;

		text {
			display: inline-block;
			box-sizing: border-box;
			font-size: 32upx;
			color: #5b5b5b;
			height: 96upx;
			line-height: 96upx;
			border-bottom: 8upx solid rgba(0, 0, 0, 0);
		}

		.line {
			width: 3rpx;
			height: 36rpx;
			background-color: #efefef;
			margin: 100upx;
		}

		.active {
			color: #fba121;
			border-bottom: 8upx solid #fbc521;
		}
	}

	.scList {
		padding: 28upx 20upx;
		display: flex;
		flex-direction: column;

		.studentRow {
			display: flex;
			align-items: center;
			height: 110upx;
			background-color: #ffffff;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 10rpx;
			padding-left: 38upx;
			padding-right: 24upx;
			margin-bottom: 20upx;

			.stuInfo {
				font-size: 28rpx;
				color: #5b5b5b;
				flex: 1;
				display: flex;
				flex-direction: column;
				.studentName{
					font-size: 32upx;
				}
				.count{
					font-size: 24upx;
					.leftCount{
						color: #F0AD4E;
						margin: 0 4upx;
					}
				}
			}

			.btn {
				width: 110rpx;
				height: 78upx;
				border-radius: 10upx;
				border: solid 3upx #a6a3c0;
				text-align: center;
				box-sizing: border-box;
				line-height: 72upx;
				font-size: 28upx;
				color: #a6a3c0;
				margin-left: 28upx;
			}

			.active {
				background-color: #fbc521;
				border: solid 3upx #fbc521;
				color: #FFFFFF;
			}
		}
	}

	.ani {
		height: 0;
	}

	.btmFiexBtn {
		position: fixed;
		width: 100%;
		height: 120upx;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		button {
			width: 496upx;
			height: 80upx;
			background-color: #ffb423;
			border-radius: 40rpx;
			border: none;
			line-height: 80upx;
			color: #FFFFFF;
		}

		button:after {
			border: none;
		}
	}
</style>
